<!DOCTYPE html>
<html lang="zh_CN">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 用于异步模块加载 -->
	<script type="text/javascript" src="amd.js"></script>
</head>
<body>
	<!-- 展示 -->
	<div id="test"></div>

	<!-- 模板 -->
	<script type="text/template" id="demo_script">
		<div id="tag_cloud">
			{% for(var i = 0, len = tagCloud.length; i < len; i++) { %}
				{% var ctx = tagCloud[i]; %}
				{% console.log(ctx); %}
				<a href="#" class="tag_item {% if(ctx['is_selected']) { %}is_selected{% } %}" title="{%=ctx['title']%}">{%=ctx['text']%}</a>
			{% } %}
		</div>
	</script>
	
	<!-- 测试 -->
	<script type="text/javascript">
		var data = {
	        tagCloud: [
	            {is_selected: true, title: '这是一本设计模式书', text: '设计模式'},
	            {is_selected: false, title: '这是一本HTML', text: 'HTML'},
	            {is_selected: null, title: '这是一本CSS', text: 'CSS'},
	            {is_selected: '', title: '这是一本javascript', text: 'javascript'},
	        ]
	    };

		F.module(['lib/template', 'lib/dom'], function(template, dom) {
		    // 服务器端获取到data数据逻辑
	        // 创建组件视图逻辑
	        var str = template('demo_script', data) ;
			console.log(str);
	        dom.html('test', str) ;
	        // 组件其他交互逻辑
		});
	</script>
</body>
</html>